<!DOCTYPE html>
<html>
<head>
<title>Gravitational Wave Detector Diagram</title>
</head>
<body>
<canvas id="canvas" width="800" height="550"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = '24px SimSun, sans-serif';

// --- Helper function for drawing fixed support hatching ---
function drawSupport(x, y, orientation) {
    ctx.beginPath();
    if (orientation === 'vertical') { // for horizontal rod, support is a vertical line
        const y1 = y - 10;
        const y2 = y + 10;
        ctx.moveTo(x, y1 - 10);
        ctx.lineTo(x, y2 + 10);
        for (let i = 0; i <= 4; i++) {
            ctx.moveTo(x, y1 - 10 + i * 10);
            ctx.lineTo(x - 10, y1 - 10 + i * 10 + 10);
        }
    } else { // for vertical rod, support is a horizontal line
        const x1 = x - 10;
        const x2 = x + 10;
        ctx.moveTo(x1 - 10, y);
        ctx.lineTo(x2 + 10, y);
        for (let i = 0; i <= 4; i++) {
            ctx.moveTo(x1 - 10 + i * 10, y);
            ctx.lineTo(x1 - 10 + i * 10 - 10, y + 10);
        }
    }
    ctx.stroke();
}

// --- Main Drawing ---
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Coordinates
const yMain = 250;
const xLaserBox = 600;
const xBsRight = 500;
const xBsLeft = 300;
const xRodHorizEnd = 150;
const xRodHorizBox = 50;
const yRodVertEnd = 300;
const yRodVertBox = 400;
const yPhototube = 400;

// Draw Laser (激光器)
ctx.strokeRect(xLaserBox, yMain - 20, 100, 40);
ctx.textAlign = 'center';
ctx.fillText('激光器', xLaserBox + 50, yMain - 40);

// Draw Horizontal Rod (棒)
ctx.strokeRect(xRodHorizBox, yMain - 10, 100, 20);
ctx.textAlign = 'center';
ctx.fillText('棒', xRodHorizBox + 50, yMain - 30);
drawSupport(xRodHorizBox, yMain, 'vertical');

// Draw Vertical Rod (棒)
ctx.strokeRect(xBsLeft - 10, yRodVertEnd, 20, 100);
ctx.textAlign = 'right';
ctx.fillText('棒', xBsLeft - 30, yRodVertEnd + 50);
drawSupport(xBsLeft, yRodVertBox, 'horizontal');

// Draw Phototube (光电管)
ctx.strokeRect(xBsRight - 20, yRodVertEnd, 40, 60);
ctx.textAlign = 'left';
ctx.fillText('光电管', xBsRight + 30, yRodVertEnd + 35);


// Draw Light Paths
// Main horizontal path
ctx.beginPath();
ctx.moveTo(xLaserBox, yMain);
ctx.lineTo(xRodHorizBox + 100, yMain);
ctx.stroke();
// Vertical path from left splitter
ctx.beginPath();
ctx.moveTo(xBsLeft, yMain);
ctx.lineTo(xBsLeft, yRodVertEnd);
ctx.stroke();
// Vertical path to phototube
ctx.beginPath();
ctx.moveTo(xBsRight, yMain);
ctx.lineTo(xBsRight, yRodVertEnd);
ctx.stroke();


// Draw Beam Splitters (半透镜)
// Left BS
ctx.beginPath();
ctx.moveTo(xBsLeft - 15, yMain - 15);
ctx.lineTo(xBsLeft + 15, yMain + 15);
ctx.stroke();
// Right BS
ctx.beginPath();
ctx.moveTo(xBsRight - 15, yMain - 15);
ctx.lineTo(xBsRight + 15, yMain + 15);
ctx.stroke();

// Draw "半透镜" Label and Arrows
const labelX = (xBsLeft + xBsRight) / 2;
const labelY = yMain - 90;
ctx.textAlign = 'center';
ctx.fillText('半透镜', labelX, labelY);

// Left Arrow
let endX_L = xBsLeft + 5;
let endY_L = yMain - 20;
ctx.beginPath();
ctx.moveTo(labelX - 35, labelY + 15);
ctx.quadraticCurveTo(labelX - 50, labelY + 45, endX_L, endY_L);
ctx.stroke();
// Arrowhead
ctx.beginPath();
ctx.moveTo(endX_L, endY_L);
ctx.lineTo(endX_L - 9, endY_L - 2);
ctx.lineTo(endX_L + 1, endY_L - 10);
ctx.closePath();
ctx.fill();

// Right Arrow
let endX_R = xBsRight - 5;
let endY_R = yMain - 20;
ctx.beginPath();
ctx.moveTo(labelX + 35, labelY + 15);
ctx.quadraticCurveTo(labelX + 50, labelY + 45, endX_R, endY_R);
ctx.stroke();
// Arrowhead
ctx.beginPath();
ctx.moveTo(endX_R, endY_R);
ctx.lineTo(endX_R - 1, endY_R - 10);
ctx.lineTo(endX_R + 9, endY_R - 2);
ctx.closePath();
ctx.fill();

</script>
</body>
</html>